html,body{
    width: 100%;
    /* position: relative; */
    background: rgb(245, 245, 245);
}

nav {
    width: 100%;
    height: 50px;
    background-color: black;
    /* position: fixed; */
}

nav>ul {
    width: 100%;
    height: 100%;
    line-height: 50px;

    display: flex;
    justify-content: space-evenly;
}
nav>ul span:hover{
    cursor: pointer;
    color: #5DD5C8;

}
nav>ul>.left {
    width: 20%;
    /* display: inline-block; */
}

nav>ul>.left {
    display: flex;
    justify-content: space-evenly;
}


.center {
    display: flex;
    justify-content: space-evenly;
}

nav ul .center {
    width: 40%;
}

.right {
    display: flex;
    justify-content: space-evenly;

}

nav ul .right {
    width: 30%;
}

/* 设置boss 直聘  样式 */
nav ul .left .logo {
    width: 40%;
    height: 100%;
}

nav ul .left .logo a span {
    font-size: 20px;
    font-weight: 800;
}

/* ------------设置城市样式--------------- */
nav ul .left .city {
    width: 50%;
    color: turquoise;
}


nav ul .left .city img {
    width: 15%;
    height: 40%;
    background-color: teal;
    color: red;

}

nav ul .left .city span {

    font-size: 12px;
}

/* -------------------------------- */
nav ul li a span {
    width: 80%;
    font-size: 14px;
}

/* ---------------------------- */


/* --------------------------- */
nav ul li a {
    color: white;
}

nav ul a:hover {
    color: teal !important;
}

nav ul #shouye span,
nav ul .logo span {
    color: teal;
}

/* ------登录注册部分---------- */
.right li a input {
    font-size: 13px;
    border-radius: 10px;
    border: 1px solid teal;
    background-color: black;
    padding: 2px 9px;
}



/* -------------遮罩层样式-------------- */
#screen {
    margin: 0 auto;
    left: 0;
    top: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 650px;
    filter: alpha(opacity=100);
    /*设置透明度为100%*/
    opacity: 1;
    /*非IE浏览器下设置透明度为100%*/
    display: none;
    z-index: 99999;
}

/* -------------弹出层样式---------------------- */
#login {
    position: absolute;
    top: 0;
    left: calc((100% - 500px) / 2);
    width: 500px;
    height: 600px;
    background: whitesmoke;
    text-align: center;
    /* 放置被覆盖 */
    z-index: 99999;
    border: 1px solid blanchedalmond;
    border-radius: 5px;
    overflow-y: scroll;
    display: none;
    overflow-y: auto;

}


/* -------------弹出层里面内容样式 */
#login #title{
    width: 100%;
    height: 50px;
    background-color: rgb(73, 201, 201);
    text-align: left;
    color: white;
    padding: 0 12px;
}
#login p span:nth-of-type(1){
    margin-left: 20px;
    font-size: 17px;
    font-weight: 500;
}
#login p span:nth-of-type(2){
    margin-left: 10px;
    font-size: 13px;
}
#login p .yincang{
    float: right;
    font-size: 13px;
}

/* .top部分 */
#login .top{
    width: 90%;
    /* height: 150px; */
    margin: 0 auto;
    text-align: left;
    font-family: "楷体";
    color: black;

}
#login .top span{
    display: block;
    height: 30px;
    font-size: 16px;
}
#login .top span:nth-of-type(1){
    margin-top: 16px;

}
#login .top span:nth-of-type(2){
    margin-bottom: 30px;
    font-size: 14px;
}
.left .city #login>.center1{
    width: 100%;
    font-family: "楷体";
    font-size: 15px;
}

.left .city #login>.center1 {
    width: 100%;
    height: 130px;
    color: black;
    text-align: left;
    padding: 0 25px;
}
.left .city #login>.center1>span{
    /* width: 100%; */
    display: block;
    line-height: 30px;
    margin-top: 10px;
    font-size: 15px;
}
.left .city #login>.center1>span:nth-of-type(2){
    border: 1px solid gray;
    display: inline-block;
    padding: 2px 10px;
}

.left .city #login>.center1>p>span{
    color: rgb(104, 202, 202);
}
.left .city #login>.content{
    width: 100%;
    height: auto;
    padding: 0 25px;
    margin-top: 10px;
}
.left .city #login>.content>.one{
    width: 100%;
    height: 350px;

    /* float: left; */
}

.left .city #login>.content>.one>li{
    width: 20%;
    height: 30px;
    line-height: 30px;
    border: 1px solid gray;
    color: black;
    font-family: "楷体";
    font-size: 14px;
    padding: 2px 5px;
    float: left;
    margin: 10px;
    
}

/* .left .city #login>.content ul:nth-of-type(2){ */
    .left .city #login #other{
    width: 94%;
    height: 30px;
    line-height: 10px;
    margin: auto;
    font-family: "楷体";
    font-size: 13px;
    color: grey;
    text-align: left !important;

}

/* -------------nav 下面一小部分---------------------------------- */
#img{
    width: 100%;
    height: 120px;
    background-color: #5DD5C8;
    /* position: absolute; */
    /* margin-top: 50px; */
    display: flex;
    justify-content: space-between;
}
#img>.left,
#img>.right
{
    width: 40%;
}
#img>.left>img{
    width: 350px;
    height: 100%;
}

#img>.right>div{
    width: 100%;
    height: 100px;
}
#img>.right>div>img{
    width: 255px;
    height: 26px;
    margin: 22px 0 8px 0;
    display: block;
}

#img>.right>div>input{
    width: 170px;
    height: 36px;
    margin-top: 10px;
    /* padding: 3px 5px; */
    color: white;
    border: 1px solid white;
    background-color: #5DD5C8;

}
#img>.right>div>input[type=text]{
    background-color:white ;
}
#img>.right>div>input[type=submit]{
    width: 82px;
    height: 36px;
}


/* ---------设置搜索部分----------------- */
#search1{
    width: 100%;
    height: 131px;
    background-color: rgb(241, 241, 241);
}
#search1 div,
#search1 p{
    width: 80%;
    margin: 0px auto;
    height: 50px;
    padding: 10px 0;

}#search1 p{
    margin-top: 13px;
}
#search1 div span{
    width: 100px;
    height: 50px;
    background-color: white;
    padding: 17px ;
    margin-right: -8px;
}
#search1 div input{
    width: 730px;
    height: 50px;
    padding: 0 10px;
    margin-right: -8px;
}
#search1 div button{
    width: 140px;
    height: 50px;
    background-color: #5DD5C8;

}
#search1 p span{
    margin-right: 8px ;
    color:#75e4d9 ;
}
#search1 p span:nth-of-type(1)
{
    color: rgb(204, 201, 201);
    
}

/* 主页的职位部分 */
#main{
    width: 96%;
    /* height: 2655px; */
    margin: 0 auto;
}
/* ---------------左侧部分------------------ */


#main .home-box{
    /* margin-left: 20px; */
   width: 1184px;
    zoom: 1;
    position: relative;
}


 .home-sider{
    margin-top: 30px;
    width: 384px;
    height: 340px;

    position: absolute;
    left: 0;
    top: 0;

}

 .job-menu{
    height: 340px;
    background: #fff;
    color: #61687c;
    position: relative;
    z-index: 1002;
    box-shadow: 5px 5px 15px rgb(3 0 0 / 4%);

}
 .job-menu dl {
    padding: 0;
    height: 42px;
    line-height: 22px;
    zoom: 1;

}

#main .home-box .home-sider .job-menu dl dd{
    padding: 8px 20px 9px;
    height: 26px;
    overflow: hidden;

}
.job-menu dl  dd span{
    margin-left: 10px;
}
#main .home-box .home-sider .job-menu dl dd i
{
    float: right;
    margin-left: 50px;
    background-position: -25px 0;
    margin-top: 15px;
    width: 12px;
    height: 12px;
    color: black;
}

/* #main .home-box .home-sider .job-menu  */


/* -------鼠标滑动上去显示隐藏部分的样式设置----------------------- */
.menu-sub
{
    /* 鼠标滑上去隐藏 */
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 20px 30px 20px 10px;
    width: 668px;
    top: 0;
    left: 384px;
    /* margin-top: 30px; */
    z-index: 1;
    box-shadow: 0 1px 6px rgb(6 0 1 / 10%);;

}
.menu-sub p{
    width: 100%;
    font-weight: 700;
}

.menu-sub ul{
    width: 100%;
    height: auto;
}
.menu-sub ul>li {
    width: 100%;
    height: auto;
    margin-top: 26px;
    display: inline;

}

.menu-sub ul>li #h4{
   
    color: #8d92a1;
    font-size: 13px;
    padding-top: 2px;
    font-weight: 400;
    padding-left: 20px;

    width: 120px;
    display: block;
    float: left;
    margin-right: 40px;
}
#h4{
    /* width: 50px;
    display: block;
    float: left;
    margin-right: 20px; */
}
.menu-sub ul li #ul-div {

    margin-left: 50px;
    border-bottom: solid 1px #f5f6f9;
    padding: 0 0 10px 1px;
    /* line-height: 32px; */
    width: 570px;
    

}
#ul-div{
    /* width: 590px;
    display: inline-block;
    word-wrap: break-word !important;
    word-break: break-all !important; */

}

.menu-sub ul li div span{

    margin-right: 15px;
  
}
/* ---------右侧图片显示---------- */
.main-right{
  width: 50%;
  height: 340px;
 position: relative;
  left: 104%;
  top: -344px;

}

/* --------热招职位------- */
#main-content{
    clear: both;
    overflow: hidden;
    position: relative;
    margin-top: 400px;
}
#main-content .box-title{
    font-size: 34px;
    text-align: center;
    position: relative;
    margin-bottom: 24px;
    font-weight: 600;
}
#main-content .box-title::before,
#main-content .box-title::after
{
    content: '';
    display: inline-block;
    vertical-align: 8px;
    margin: 0 10px;
    width: 50px;
    height: 1px;
    background: #d1d4db;
}
#main-content  h3{
    width: 94%;
    height: 50px;
   line-height: 50px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
    background: #fff;
    margin-bottom: 10px;
    /* margin-right: -77px; */
    display: flex;
    justify-content: space-between;

}
#main-content  h3 span{ 

	font-size: 18px;
    font-weight: 600;
    color: #8d92a1;
    cursor: pointer;
    margin-right: 25px;
    text-align: left;
    /* position: relative; */
    /*   你这是给全部span设置了，y也可以 */
}
#main-content h3 span.cur{
    /* 哪个标签的伪类他的直接父元素就是哪个标签
    你这是给全部span设置了，y也可以
    只设置有伪类的那一个也可以
     */
    color: #00c2b3;
    font-weight: 600;
    position: relative;
}
#main-content h3 span.cur::after
{
    background-color: #00c2b3;
    bottom: 0;
    left: 0;
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
}
/* #main-content  h3 .cur::after{ 
    content: '';
    position: absolute;
    width: 10%;
    height: 3px;
} */


/* 具体职位 部分*/
.vline{
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 10px;
}
#main-content ul{
    width: 94%;
    margin: 0 auto;

}
#main-content ul li{
    width: 32%;
    float: left;
    background: white;
    margin-right: 15px;
    margin-bottom: 15px;


}
#main-content ul li div{
    padding: 10px 5px;
}
#main-content ul li .div-one{
    padding: 10px 10px;
    border-bottom: 1px solid ghostwhite;
}
/* #main-content ul li .div-one>p
{
   
} */

#main-content ul li div .div-top{
    height: 36px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
    /* overflow: hidden;
    text-overflow: ellipsis; */
}
#main-content ul li div .div-top>p{
    line-height: 20px;
}
#main-content ul li div .div-top img{
    width: 15px;
    height: 15px;
}
#main-content ul li div .div-top>p:nth-of-type(1){
    color: rgb(60, 223, 206);
    font-weight: 600;
    font-size: 18px;
}
#main-content ul li div .div-top>p:nth-of-type(2){
    color: tomato;

}
#main-content ul li .div-two{
    padding: 10px 10px;
    height: 50px;
    line-height: 40px;
    ;
}
#main-content ul li .div-two span{
    margin-right: 8px;
}
#main-content ul li .div-two span img{
    width: 30px;
    height: 30px;
    
}

/* 查看更多职位  直接跳转到职位页面 */
.job-more{
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-top: 10px;
}
.job-more a{
    margin: 0 auto;
    width: 216px;
    font-size: 20px;
    height: 32px;
    line-height: 32px;
    background: #5dd5c8;
    color: #fff;
    padding: 16px  50px;
    margin-bottom: 20px;
    /* position: absolute; */
}

/* --------热门集团------ */
#main-content1{
    clear: both;
    overflow: hidden;
    margin-top: 50px !important;
    width: 94%;
    margin: 0 auto;

}
#main-content1 .box-title1{
    font-size: 34px;
    text-align: center;
    position: relative;
    margin-bottom: 24px;
    font-weight: 600;
}
#main-content1 .box-title1::before,
#main-content1 .box-title1::after
{
    content: '';
    display: inline-block;
    vertical-align: 8px;
    margin: 0 10px;
    width: 50px;
    height: 1px;
    background: #d1d4db;
}

/* #main-content1 ul:nth-of-type(1){
    margin-top: 50px;
} */
/* ul  里  li */
#main-content1 section{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#main-content1 section>ul {
    width: 31%;
    margin: 20px 10px;
    /* float: left;
     */
        /* background-color:white; */
}
#main-content1 section ul li{
    background-color:white;
  /* width: 96%; */
  margin: 0 auto;
  border-bottom: 1px solid rgb(230, 222, 222);
}
#main-content1 section ul .hot-firm{    
    background-color:white;
    margin-top: 10px;

}
#main-content1 section ul .hot-firm img{
    padding: 3px;
    width: 55px;
    height: 55px;
    float: left;
    margin-right: 30px;
}
#main-content1 section ul .hot-firm  .hot-content{
    height: 50px;
    line-height: 30px;

}
#main-content1 section ul .hot-firm  .hot-content>p:nth-of-type(1){
font-size: 22px;


}
#main-content1  section ul li .div-one{
    padding: 10px 10px;
    border-bottom: 1px solid ghostwhite;
}

#main-content1 section ul li  .div-top{
    height: 36px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
}
#main-content1  section ul li  .div-top>p{
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;

}
#main-content1 section ul li  .div-top img{
    width: 15px;
    height: 15px;
}

#main-content1 section ul li .div-top p:nth-of-type(2){
    color: tomato;
}

#main-content1 section ul li .div-one>p span{
    background-color:#f8f9fc ;
    color: #8d92a1;
    
    padding: 5px;
}
#main-content1 section ul .job-more a{
    background-color: white;
    color: turquoise;
    border: 1px solid turquoise;
    padding: 10px 40px;
}


#right-img{
    width: 40px;
    position: fixed;
    height: 600px;
    list-style-type: 100px;
    background-color: white;
    top: 0;
    right: 0;

}
#right-img ul li{
    display: block;
    position: relative;
    font-size: 12px;
    color: #9fa3b0;
    line-height: 14px;
    margin: 10px auto 10px;
}
#right-img>ul>li>em{
    background: url('../img/shouye/siderbar.png');
    margin: 10px auto 10px;
    width: 21px;
    height: 21px;
    background-size: 42px auto;
    position: absolute;
    top: 0;
}
#right-img ul li:nth-of-type(1) em{
    position: absolute;
    top: 10px;
    background-position: -21px -62px;
}
#right-img ul li:nth-of-type(2) em{ 
    position: absolute;
    top: 50px;
    background-position: 0 -21px;
}
#right-img ul li:nth-of-type(3) em{ 
    position: absolute;
    top: 100px;
    background-position: 0 -42px;
}
#right-img ul li:nth-of-type(4) em{ 
    position: absolute;
    top: 150px;
    background-position: 0 -84px;
}
#right-img ul li:nth-of-type(5) em{ 
    position: absolute;
    top: 200px;
    background-position: 0  0;
}

/* -------------弹出样式------------ */
.tanchutop{
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    background-color: #fff;
    padding-top: 30px;
    display: none;
    z-index: 9000;
}


.top-search{
    width: 90%;
    margin: 0 auto;

}
.logo{
    width: 110px;
    height: 36px;
    margin-right: 30px;
    
}
.logo img{
    width: 110px;
    height: 24px;
    
}
.logo,
.top-center,
.top-right{
    float: left;
    height: 50px;
    line-height: 50px;
}

.top-center{
    border:1px solid gainsboro;
    margin-right: 20px;
    width: 580px;
    padding-left:  20px;
}
.top-center button{
    background-color: #00c2b3;
    color: black;
    text-align: right;
    float: right;
    line-height: 48px;
    padding: 0 20px;

}
.top-right input{
    width: 140px;
    padding: 15px 8px;
    border:1px solid gainsboro

}
.top-right button{
    color: #00c2b3 !important;
    padding: 15px 10px;
    border:1px solid #5DD5C8;
    background-color: #fff;
    color: black;
}